<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Offer Layout</title>    
    <script src="./fonts/font_4717795_7d4kesgo53q//iconfont.js"></script>
    <link rel="stylesheet" href="./fonts/font_4717795_7d4kesgo53q/iconfont.js">
    <link rel="stylesheet" href="liuwenqi1.css">
</head>
<body>
<!-- 顶部导航栏 -->
<div class="liu-navbar">
    <a href="#" class="active">推荐</a>
    <a href="#">实习</a>
    <a href="#">校招</a>
    <a href="#">留学生</a>
    <a href="#">寒假实习</a>
  </div>

  <!-- 主内容 -->
  <div class="liu-content">
    <div class="section-title">和 HR 面对面</div>
    <div class="section-subtitle">参与直播互动，专属通道投递</div>
    <div class="cards">
      <div class="card">
        <img src="img//四川.jpg" alt="图标">
        <p>四川省人...</p>
      </div>
      <div class="card">
        <img src="img/米可.jpg" alt="图标">
        <p>米可世界</p>
      </div>
      <div class="card">
        <img src="img/麦克.png" alt="图标">
        <p>麦克韦尔</p>
      </div>
      <div class="card">
        <img src="img/雪川.jpg" alt="图标">
        <p>雪川农业</p>
      </div>
      <div class="card">
        <img src="img/德勤.jpg" alt="图标">
        <p>德勤中...</p>
      </div>
    </div>
  </div>


  <div class="liu-footer">
    <a href="#">推荐</a>
    <a href="#">最新</a>
    <a href="#">全国</a>
    <a href="#">筛选</a>
  </div>



    <div class="liu-job-card">
        <div class="job-header">
            <h2>Java开发实习生</h2>
            <span class="salary">100-120/天</span>
        </div>
        <div class="job-details">
            5天/周 &nbsp;&nbsp; 3个月 &nbsp;&nbsp; 本科
        </div>
        <div class="benefits">
            <span class="benefit">免费班车</span>
            <span class="benefit">免费健身房</span>
            <span class="benefit">免费三餐</span>
        </div>
        <div class="company-info">
            <img src="./img/屏幕截图 2024-10-01 193750.png" alt="NetEase Logo">
            <div>
                <strong>网易</strong><br>
                已上市 &nbsp;&nbsp; 2000人以上
            </div>
        </div>
        <div class="location">
            北京 海淀区
        </div>
    </div>
    <div class="job-card">
        <div class="job-header">
            <h2>Android/Java开发实习生</h2>
            <span class="salary">120-200/天</span>
        </div>
        <div class="job-details">
            5天/周 &nbsp;&nbsp; 3个月 &nbsp;&nbsp; 本科
        </div>
        <div class="benefits">
            <span class="benefit">可转正实习</span>
            <span class="benefit">远程办公</span>
        </div>
        <div class="company-info">
            <img src="./img/puhuihengfeng.jpg" alt="NetEase Logo">
            <div>
                <strong>普惠恒丰</strong><br>
                未融资 &nbsp;&nbsp; 15-50人以上
            </div>
        </div>
        <div class="location">
            全国
        </div>
    </div>
    <nav class="bnav">
        <ul>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jihui"></use>
                    </svg>
                    <p>机会</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-a-049_kecheng"></use>
                    </svg>
                    <span class="num">15</span>
                    <p>课程</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode"></use>
                    </svg>
                    <p>消息</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhibojian_huaban"></use>
                    </svg>
                    <p>职播</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode1"></use>
                    </svg>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </nav>
    
<script>
// 获取所有的导航项
const navItems = document.querySelectorAll('.bnav li');

// 为每个导航项添加点击事件监听器
navItems.forEach(item => {
    item.addEventListener('click', function() {
        // 移除所有项的 active 样式
        navItems.forEach(i => i.classList.remove('active'));

        // 为当前点击的项添加 active 样式
        this.classList.add('active');
    });
});


</script>
</body>
</html>